<template>
  <div @click="onOpen" :style="currentStyle">
  </div>
</template>

<script>
import basic from "./basic.vue";
import common from "../common.js";
import _ from "lodash";
import echarts from 'echarts'

export default {
  extends: basic,
  computed: {
    currentSize() {
      let [width, height] = common
        .case(this.currentMarker.size)
        .array(val => val)
        .function(val => val.call(this, this.prop))
        .default([120, 100]);
      width = Number(width);
      height = Number(height);
      return [width, height];
    },
    currentOffSet() {
      let [width, height] = this.currentSize;
      return common
        .case(this.currentMarker.offset)
        .array(val => val)
        .function(val => val.call(this, this.prop))
        .default([-width / 2, -height]);
    },
    currentStyle() {
      let [dx, dy] = this.currentOffSet;
      let [width, height] = this.currentSize;
      return Object.assign({}, this.basicStyle, {
        width: `${width}px`,
        height: `${height}px`,
        transform: `translate3d(${dx}px, ${dy}px, 0)`
      });
    },
    currentEchartOption() {
      return this.currentMarker.echartOption ? this.currentMarker.echartOption.call(this, this.prop) : null
    }
  },
  methods: {
    updateCharts() {
      if (!this.currentEchartOption) return
      if (!this.currentChart) {
        this.currentChart = echarts.init(this.$el);
      }
      this.currentChart.setOption(this.currentEchartOption)
    },
    setInfoWindowDefaultOffset(layer) {
      if (!layer.infoWindow) {
        layer.infoWindow = {};
      }
      let [width, height] = this.currentSize;
      layer.infoWindow.offset = layer.infoWindow.offset || [0, height / 2];
      return layer;
    }
  },
  watch: {
    currentEchartOption(val) {
      this.updateCharts()
    }
  }
};
</script>
